<template>
  <el-dialog v-model="props.dialogVisible" :title="props.dialogId ? '编辑' : '新增'" width="40%">
    <el-form ref="ruleFormRef" :model="props.formData" :rules="rules" label-width="200px" class="demo-ruleForm"
      status-icon>
      <el-form-item label="账号" prop="username">
        <el-input v-model="props.formData.username" />
      </el-form-item>
      <el-form-item label="姓名" prop="realname">
        <el-input v-model="props.formData.realname" />
      </el-form-item>
      <el-form-item label="性别">
        <el-input v-model="props.formData.sex" />
      </el-form-item>
      <el-form-item label="手机号" prop="phone">
        <el-input v-model="props.formData.phone" />
      </el-form-item>
      <el-form-item label="部门" prop="orgCode">
        <el-select v-model="props.formData.orgCode">
          <el-option :label="item.title" :value="item.value" v-for="(item, index) in deptList" :key="index" />
        </el-select>
      </el-form-item>
      <el-form-item label="状态">
        <el-input v-model="props.formData.status" />
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="submitForm(ruleFormRef)">
          创建
        </el-button>
        <el-button @click="resetForm(ruleFormRef)">重置</el-button>
      </el-form-item>
    </el-form>

  </el-dialog>
</template>

<script setup>
import userApi from "../../../api/user";
import { reactive, ref } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus';
const ruleFormRef = ref()
const emit = defineEmits(['close']);
const props = defineProps({
  dialogVisible: {
    type: Boolean,
    default: false
  },
  dialogId: {
    type: String,
    default: ''
  },
  formData: {
    type: Object,
    default: []
  }
})
const deptList = ref([])
const rules = reactive({
  username: [{ required: true, message: '账号不能为空', trigger: 'blur' }],
  realname: [{ required: true, message: '姓名不能为空', trigger: 'blur' }],
  phone: [{ required: true, message: '手机不能为空', trigger: 'blur' }],
  orgCode: [{ required: true, message: '部门不能为空', trigger: 'blur' }],
})
/**
 * 获取部门
 */
const getDepartData = async () => {
  let userId = sessionStorage.getItem('userId')
  const res = await userApi.getUserDepart({ userId: userId });
  console.log(res, '获取部门');
  if (res.data.success) {
    deptList.value = res.data.result
  }
}
defineExpose({ getDepartData });
/**
 * 关闭弹窗
 */
const handleClose = (formRef) => {
  emit('close', false)
  resetForm(formRef);
}

/**
 * 表单提交
 */
const submitForm = async (formEl) => {
  console.log(formEl, 'formEl');
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      console.log('wewe');
      if (props.dialogId) {
        userApi.editUser(props.formData)
          .then(() => {
            ElMessage.success('修改成功');
            handleClose()
          })
      } else {
        userApi.saveUser(props.formData)
          .then(() => {
            ElMessage.success('新增成功');
            handleClose()
        })

      }
    } else {
      console.log('error submit!', fields)
    }
  })
}

const resetForm = (formEl) => {
  if (!formEl) return
  formEl.resetFields()
  props.formData.id = ""
}
// const submitForm = (formEl) => {
//   loading.value = false;
//   formEl.validate((isValid) => {
//     console.log(isValid, 'isValid');
//     if (isValid) {

//       if (props.dialogId) {
//         userApi.editUser(props.formData)
//           .then(() => {
//             ElMessage.success('修改成功');
//             handleClose()
//           })
//           .finally(() => (loading.value = false));
//       } else {
//         userApi.addUser(props.formData)
//           .then(() => {
//             ElMessage.success('新增成功');
//             handleClose()
//           })
//           .finally(() => (loading.value = false));
//       }
//     }
//   })
// }

</script>

<style scoped>
.demo-ruleForm {
  width: 80%;
}
</style>